// components/styleban/styleban.js
Component({
  /**
   * 组件的属性列表
   */
  properties: {
    banner: Array

  },

  /**
   * 组件的初始数据
   */
  data: {
    //   list: [{
    //     src: 'https://i0.hdslb.com/bfs/manga-static/d90e105c2d315595c4a92058f4465ab0743c82b2.png',
    //     isActive: false,
    //     isLast: true,
    //     isNext: false,
    //     animation: null
    //   },
    //   {
    //     src:  'https://i0.hdslb.com/bfs/manga-static/9b097af5a8946448310f98f54241048f1b2aebcc.jpg',
    //     isActive: true,
    //     isLast: false,
    //     isNext: false,
    //     animation: null
    //   },
    //   {
    //     src:  'https://i0.hdslb.com/bfs/manga-static/702d0e720ae984e82bd6d8740db8547cf551b3f8.png',
    //     isActive: false,
    //     isLast: false,
    //     isNext: true,
    //     animation: null
    //   }

    // ],
    active: 1,
    timer: null,
    flag: true,
    touchFlag: false,
    startX: 0,
    endX: 0

  },

  /**
   * 组件的方法列表
   */
  methods: {
    ontap: function () {
      if (this.data.flag) {
        this.setData({
          flag: false
        })
        let that = this;
        let arrNew = this.data.list.map(function (item, index) {
          if (item.isActive) {
            item.isActive = false;
            item.isLast = true,
              item.isNext = false;
            var a = wx.createAnimation({
              transformOrigin: 'left center'
            });
            a.left('-20rpx').step();
            item.animation = a.export()
          } else if (item.isLast) {
            item.isActive = false;
            item.isLast = false;
            item.isNext = true;
            var a = wx.createAnimation();
            a.left('500rpx').step();
            item.animation = a.export()
          } else if (item.isNext) {
            item.isActive = true;
            item.isLast = false;
            item.isNext = false;
            var a = wx.createAnimation();
            a.left('150rpx').step();

            item.animation = a.export()
          }
          return item

        })
        this.setData({
          list: arrNew,
          flag: true
        });
      }
    },
    //上一个
    onprevTap: function () {
      if (this.data.flag) {
        this.setData({
          flag: false
        })
        let that = this;
        let arrNew = this.data.list.map(function (item, index) {
          if (item.isActive) {
            item.isActive = false;
            item.isLast = false,
              item.isNext = true;
            var a = wx.createAnimation();
            a.left('500rpx').step();
            item.animation = a.export()
          } else if (item.isLast) {
            item.isActive = true;
            item.isLast = false;
            item.isNext = false;
            var a = wx.createAnimation();
            a.left('150rpx').step();
            item.animation = a.export()
          } else if (item.isNext) {
            item.isActive = false;
            item.isLast = true;
            item.isNext = false;
            var a = wx.createAnimation({
              transformOrigin: 'left center'
            });
            a.left('-20rpx').step();
            item.animation = a.export()
          }
          return item

        })
        this.setData({
          list: arrNew,
          flag: true
        });
      }
    },


    // 自动播放
    autoplay(times) {
      this.setData({
        timer: setInterval(() => {
          this.ontap();
        }, times)
      })
    },
    // 暂停播放
    pause() {
      clearInterval(this.data.timer);
      this.setData({
        timer: null
      })
    },
    onstart(event) {
      //暂停自动轮播
      this.pause();
      this.setData({
        touchFlag: true,
        startX: event.changedTouches[0].pageX
      });


    },
    onclick(event) {
      // 点击轮播图跳转

      let id = event.currentTarget.dataset.id
      console.log("id", id);
      if (id) {
        wx.request({
          url: 'https://apis.netstart.cn/bcomic/ComicDetail',
          data: {
            'comicId': id
          },
          success: (res) => {
            console.log(res);
            let dt = res.data.data;
            const data = JSON.stringify(dt)
            this.pageRouter.navigateTo({
              url: '../../pages/readintro/readintro?data=' + encodeURIComponent(data),
            });
          }
        });

      } else {
        // outerChain为url链接
        let outerChain = event.currentTarget.dataset.url;
        console.log("outerChain", outerChain);
        wx.navigateTo({
          url: '../../pages/outer/outer?src=' + encodeURIComponent(outerChain),
        })
      }

    },
    onend(event) {
      this.pause();
      this.setData({
        endX: event.changedTouches[0].pageX,
        touchFlag: false
      });
      if (!this.data.touchFlag) {
        var length = this.data.endX - this.data.startX;
        console.log(length);
        if (length <= 0) {
          // 显示下一张
          this.ontap()
        } else {
          //显示上一张\
          this.onprevTap()
        }
      }



      //开启自动轮播
      setTimeout(() => {
        this.pause();
        this.autoplay(4000)
      }, 3000);








    },


  },
  lifetimes: {
    ready() {
      this.autoplay(4000);
      console.log('开始组件');
      console.log(this.data.banner);
      let arr = [{
          src: this.data.banner[0].image_url,
          isActive: false,
          isLast: true,
          isNext: false,
          animation: null,
          comic_id: this.data.banner[0].comic_id,
          url: this.data.banner[0].jump_url

        },
        {
          src: this.data.banner[1].image_url,
          isActive: true,
          isLast: false,
          isNext: false,
          animation: null,
          comic_id: this.data.banner[1].comic_id,
          url: this.data.banner[1].jump_url


        },
        {
          src: this.data.banner[2].image_url,
          isActive: false,
          isLast: false,
          isNext: true,
          animation: null,
          comic_id: this.data.banner[2].comic_id,
          url: this.data.banner[2].jump_url


        }
      ];
      this.setData({
        list: arr

      })



    }
  }
})